<template>
    <div>
        <el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="30%" style="text-align: left">
            <table style="font-weight: bold">
                <tr>
                    <td><label for="label_11">姓名: <span style="color: red">*</span></label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="name"
                            id="label_11"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_12">用户名: <span style="color: red">*</span></label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="username"
                            id="label_12"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_13">密码: <span style="color: red">*</span></label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="password"
                            id="label_13"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_17">角色:</label></td>
                    <td>
                        <el-select v-model="role_id" placeholder="请选择" id="label_17">
                            <el-option
                                v-for="item in role_name_options"
                                :key="item.id"
                                :value="item.id"
                                :label="item.name"
                            >
                            </el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_18">分组名: <span style="color: red">*</span></label></td>
                    <td>
                        <el-select v-model="group_id" placeholder="请选择" id="label_18">
                            <el-option
                                v-for="item in group_id_options"
                                :key="item.id"
                                :value="item.id"
                                :label="item.group_name"
                            >
                            </el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_14">联系方式: <span style="color: red">*</span></label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="phone"
                            id="label_14"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_15">QQ:</label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="qq"
                            id="label_15"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_16">状态:</label></td>
                    <td>
                        <el-select v-model="status" placeholder="请选择" id="label_16">
                            <el-option
                                v-for="item in status_options"
                                :key="item.value"
                                :value="item.value"
                                :label="item.label"
                                style="width: 250px"
                            >
                            </el-option>
                        </el-select>
                    </td>
                </tr>
            </table>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddUser">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    var md5 = require('js-md5');
    export default {
        name: "AddUser",
        data() {
            return {
                dialogFormVisible: false,
                name: "",
                username: "",
                password: "",
                phone: "",
                qq: "",
                status: "1",   // 默认启用
                role_id: 5,  // 默认员工
                status_options: [
                    {value: "1", label: "启用"},
                    {value: "2", label: "禁用"},
                ],
                role_name_options: "",
                group_id: "",
                group_id_options: []
            };
        },
        methods: {
            handleCheckIsNull() {
                let errMsg = '';
                this.name === '' ? errMsg += '姓名不能为空, ' : '';
                this.username === '' ? errMsg += '用户名不能为空, ' : '';
                this.password === '' ? errMsg += '密码不能为空, ' : '';
                this.phone === '' ? errMsg += '联系方式不能为空, ' : '';
                this.group_id === '' ? errMsg += '分组名不能为空, ' : ''

                // 验证下密码的长度, 必须为数字和字母组合
                let patternNum = /\d+/;
                let patternAlphabet = /[a-z]+/i;
                let isOk = patternAlphabet.test(this.password) && patternNum.test(this.password) && this.password.length >= 6
                if (!isOk) {
                    errMsg += '请输入 6 位及以上的数字和字母组合';
                }
                return errMsg;
            },
            handleOpen() {
                this.name = "";
                this.username = "";
                this.password = "";
                this.phone = "";
                this.qq = "";
                this.group_id = "";
                this.dialogFormVisible = true;
            },
            // 新增用户
            handleAddUser() {
                // 验证必填
                let err = this.handleCheckIsNull();
                if (err !== '') {
                    this.$message({'type': 'error', 'message': err});
                    return false;
                }
                let reqData = {
                    "name": this.name,
                    "username": this.username,
                    "password": md5(this.password),
                    "phone": this.phone,
                    "qq": this.qq,
                    "status": this.status,
                    "role_id": this.role_id,
                    "group_id": this.group_id
                };
                this.AXIOS.post("/api/user/add", reqData)
                    .then(resp => {
                        // console.log(resp)
                        let statusCode = resp.data.status;
                        if (statusCode === 1) {
                            this.$message({type: "success", message: "新增成功"});
                            this.dialogFormVisible = false;   // 关闭对话框
                            // 调用父组件中的 handleInitUserListData, 刷新 list 数据
                            this.$parent.handleInitUserListData();
                        } else {
                            this.$message({type: "error", message: resp.data.msg})
                        }
                    })
                    .catch(err => {
                        this.$message({type: "error", message: err})
                    })
            },
            handelInitInfo() {
                // 获取角色
                this.AXIOS.get("/api/user/getRoleInfo")
                    .then(resp => {
                        // console.log(resp.data.data)
                        this.role_name_options = resp.data.data;
                    })
                    .catch(err => {
                        console.log(err)
                    });

                // 获取分组名
                this.AXIOS.get("/api/user/getGroupInfo")
                    .then(resp => {
                        console.log(resp.data.data)
                        this.group_id_options = resp.data.data;
                    })
                    .catch(err => {
                        console.log(err)
                    });

            }
        },

        mounted() {
            this.handelInitInfo();
        }
    };
</script>

<style scoped>
</style>
